Skip to content

Fix desktop inline diff panel layout and resize behavior#1970

Open
sabraman wants to merge 8 commits intopingdotgg:mainfrom
sabraman:codex/desktop-inline-diff-panel
Open

Fix desktop inline diff panel layout and resize behavior#1970
sabraman wants to merge 8 commits intopingdotgg:mainfrom
sabraman:codex/desktop-inline-diff-panel

Conversation

@sabraman
Copy link
Copy Markdown
Contributor

@sabraman sabraman commented Apr 12, 2026 •
edited by macroscopeapp bot
Loading

Summary

This PR fixes a set of closely related desktop diff panel regressions in the web app.

On desktop, opening the diff panel was still affecting the layout in the wrong places. The header needed to stay fixed while the diff opened inside the main messages area and pushed the rest of the post-header content with it. The inline panel also needed to behave like the original implementation during resize, and the diff header turn strip needed a proper edge fade instead of a detached overlay.

What changed

The desktop thread route now mounts the diff panel inline inside ChatView instead of rendering it as a separate sibling sidebar. ChatView owns the split layout below the header, so the diff opens in the same space as the messages, composer, and checkout toolbar without shifting the header itself.

The inline diff panel now has a draggable resize handle with col-resize cursor feedback. The resize path uses direct DOM width updates during pointer drag and only persists the final width when the drag ends, which restores the smoother behavior from the original implementation and avoids React-driven drag lag.

The diff shell layout was also adjusted so desktop inline empty states fill the available height correctly. That keeps states like No completed turns yet. centered inside the panel instead of sitting at the top of the body.

Finally, the diff turn-strip edge fade no longer uses a painted overlay. The fade is now applied to the scrollable content itself with a dedicated ScrollFadeEffect component and matching mask utilities, which fixes the header misalignment artifact visible while horizontally scrolling the turn chips.

User-visible effect

Before this change:
image

  • Opening the desktop diff panel resized or shifted layout in ways that affected the header.
  • The inline resize interaction felt constrained and laggy.
  • Empty-state content in the inline diff panel did not stay vertically centered on desktop.
  • The turn-strip edge fade could drift visually and appear as a detached dark patch over the header controls.

After this change:
image

  • The header stays fixed while the diff opens below it in the main content area.
  • The composer and checkout area shift with the inline diff, not the header.
  • The inline diff can be resized smoothly with cursor feedback.
  • Empty states are centered inside the desktop inline panel.
  • The turn-strip edge fade is aligned with the scrolling content.

Validation

  • bun fmt
  • bun lint (existing repo warnings only)
  • bun typecheck

Notes

This is intentionally scoped to the desktop inline diff layout and its related diff-header interactions. It does not change the mobile diff sheet behavior.

Note

Fix desktop inline diff panel layout and resize behavior in ChatView

  • Moves inline diff panel rendering and resize logic from the route-level DiffPanelInlineSidebar into ChatView via new messagesAside and messagesAsideOpen props, placing the panel below the chat header as a right-side aside.
  • Adds pointer-event-based drag-to-resize with col-resize cursor, width clamping to enforce minimum widths for both the chat column and the panel, and localStorage persistence of the chosen width.
  • Introduces a ScrollFadeEffect component and supporting CSS scroll-timeline utilities in index.css to fade panel scroll edges, with a fallback for browsers without scroll-timeline support.
  • DiffPanelShell no longer sets a fixed width or border-l in inline mode; it fills available space provided by the parent.
  • Behavioral Change: title bar control inset reservation is no longer toggled by diffOpen in the chat thread route.

Macroscope summarized dccbb2c.

Note

Medium Risk
Medium risk because it refactors desktop chat/diff layout composition and adds custom pointer-driven resize + width persistence logic, which can affect core chat rendering and responsiveness across viewports.

Overview
Fixes desktop inline diff layout by moving diff rendering into ChatView via new messagesAside/messagesAsideOpen props, so opening the diff splits only the post-header content instead of resizing the header.

Adds a pointer-based resize handle for the inline diff aside with width clamping, ResizeObserver sync, and persistence to localStorage (chat_diff_inline_width), plus browser tests covering header positioning, collapse behavior during resize sync, and width restore.

Improves diff UI polish by making DiffPanelShell fill its parent (better inline empty-state centering) and by introducing ScrollFadeEffect + new CSS mask utilities to apply a scroll-edge fade directly to the diff turn-strip content.

Reviewed by Cursor Bugbot for commit dccbb2c. Bugbot is set up for automated code reviews on this repo. Configure here.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 12, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6d8e5743-59a9-4927-869c-b374ed934d45

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added size:XL 500-999 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Apr 12, 2026
@sabraman sabraman marked this pull request as ready for review April 12, 2026 21:23
chatgpt-codex-connector[bot]
chatgpt-codex-connector bot reviewed Apr 12, 2026
View reviewed changes
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dc6cd30f0a

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp bot commented Apr 12, 2026 •
edited
Loading

Approvability

Verdict: Needs human review

This PR refactors the desktop diff panel from a sidebar-based implementation to inline rendering with custom resize handling. While purely UI-focused with no security/backend implications, the changes introduce significant new interaction logic (~166 lines of resize handlers) and restructure a core component. The author appears to be a newer contributor to this file.

You can customize Macroscope's approvability policy. Learn more.

@sabraman sabraman changed the title [codex] desktop inline diff panel fixes Fix desktop inline diff panel layout and resize behavior Apr 12, 2026
macroscopeapp[bot]
macroscopeapp bot reviewed Apr 12, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 12, 2026
View reviewed changes
@sabraman sabraman force-pushed the codex/desktop-inline-diff-panel branch from 7571000 to b6272ce Compare April 14, 2026 00:55
macroscopeapp[bot]
macroscopeapp bot reviewed Apr 14, 2026
View reviewed changes
cursor[bot]
cursor bot reviewed Apr 14, 2026
View reviewed changes
@sabraman sabraman force-pushed the codex/desktop-inline-diff-panel branch from cd196b7 to 0683f25 Compare April 14, 2026 03:17
cursor[bot]
cursor bot reviewed Apr 14, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 0683f25. Configure here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@macroscopeapp macroscopeapp[bot] macroscopeapp[bot] left review comments

@chatgpt-codex-connector chatgpt-codex-connector[bot] chatgpt-codex-connector[bot] left review comments

@cursor cursor[bot] cursor[bot] left review comments

Assignees

No one assigned

Labels

size:XL 500-999 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@sabraman